<template>


	<view class="skeleton-container" v-if="loading">
		<uv-skeleton
		rows="20"
		title
		loading
		></uv-skeleton>
	</view>

	<view v-else>
		
		<view class="search-container">
			<TmpSearch 
				:searchValue="搜索"
			/>
		</view>

		<view class="category-nav" v-if="!loading">
			<TmpCategoryNav
				:list="categoryType"
				:currentTab="currentTab.typeIndex"
				currentTabType="typeIndex"
				@parentEvent="clickCategoryType"
			/>

			<TmpCategoryNav
				:list="categoryFirst"
				:currentTab="currentTab.firstIndex"
				currentTabType="firstIndex"
				@parentEvent="clickCategoryFirst"
			/>

			<TmpCategoryNav
				:list="categorySecond"
				:currentTab="currentTab.secondIndex"
				currentTabType="secondIndex"
				@parentEvent="clickCategorySecond"
			/>
		</view>

		<view class="content" v-if="!loading">
			<template v-if="articleList && articleList.length > 0">
				<TmpArticle1
					v-for="(item, idx) in articleList"
					:key="idx"
					:item="item"
				/>
			</template>
			<view v-else class="no-data">
				
			</view>
		</view>

		<!-- 加载状态 -->
		<!-- <view class="loading-container" v-if="loading">
			<uv-loading mode="circle" size="28"></uv-loading>
			<text class="loading-text">加载中...</text>
		</view> -->
	</view>


</template>

<script>

import TmpCategoryNav from '@/components/category/tmp-category-nav.vue'
import TmpSearch from '@/components/common/tmp-search.vue'
import TmpArticle1 from '@/components/article/tmp-articel-1.vue'
import TmpArticle2 from '@/components/article/tmp-articel-2.vue'
import request from '@/common/tools/tools-request'

	const category = {
		"categoryType": [
			{
				"category_name": "全部",
				"category_type": "all",
				"category_code": "",
				"is_selected": true
			},
			{
				"category_name": "课程",
				"category_type": "course",
				"category_code": "course",
				"is_selected": false
			},
			{
				"category_name": "话术",
				"category_type": "script",
				"category_code": "script",
				"is_selected": false
			}
		],
		"categoryFirst": [
			{
				"category_name": "全部",
				"category_type": "all",
				"category_code": "",
				"is_selected": true
			},
			{
				"category_name": "日常",
				"category_type": "script",
				"category_code": "C25030306383QE24O2RG00M5",
				"is_selected": false
			},
			{
				"category_name": "恋爱心理学",
				"category_type": "course",
				"category_code": "C2504061224B2559C9IR3Y5H",
				"is_selected": false
			},
			{
				"category_name": "恋爱思维",
				"category_type": "course",
				"category_code": "C25022122470ZW0M589Q4V0O",
				"is_selected": false
			}
		],
		"categorySecond": [
			{
				"category_name": "全部",
				"category_type": "all",
				"category_code": "",
				"is_selected": true
			},
			{
				"category_name": "观念与态度",
				"category_type": "course",
				"category_code": "C25040612269A4T47J0DYS93",
				"is_selected": false
			},
			{
				"category_name": "决策与判断",
				"category_type": "course",
				"category_code": "C2504061226R3N6ZW1Y243D4",
				"is_selected": false
			},
			{
				"category_name": "自我成长",
				"category_type": "course",
				"category_code": "C2504061226L96O8W50EM9G5",
				"is_selected": false
			},
			{
				"category_name": "心理想象",
				"category_type": "course",
				"category_code": "C2504061227X946Y87V6N6IT",
				"is_selected": false
			},
			{
				"category_name": "观念态度",
				"category_type": "course",
				"category_code": "C2502220237G710G936K3OZA",
				"is_selected": false
			},
			{
				"category_name": "决策判断",
				"category_type": "course",
				"category_code": "C250222023784V111J2PDFD1",
				"is_selected": false
			}
		]
	};

	const articelListTmp = [
					{ title: '尽管我的道路从头到尾都长满了杂草，但也只有我自己是我这一生的见证人。', desc: '', hot: 2423, vip: true },
					{ title: '女生问"你是不是喜欢我？"真实和诚实..', desc: '', hot: 2423, vip: true },
					{ title: '女生问"你是不是喜欢我？"真实和诚实..', desc: '', hot: 2423, vip: true },
					{ title: '女生问"你是不是喜欢我？"真实和诚实和现实的区别到底是什么？', desc: '', hot: 2423, vip: true }
				];
	
	export default {
		components: { TmpCategoryNav, TmpSearch,TmpArticle1,TmpArticle2 },
		data() {
			return {
				loading: true,
				categoryType: [],
				categoryFirst: [],
				categorySecond: [],
				articleList: [],

				//request params
				requestCategory: {
					typeCode: '',
					firstCode: '',
					secondCode: ''
				},

				//curretnTab
				currentTab: {
					typeIndex: 0,
					firstIndex: 0,
					secondIndex: 0
				},
			}
		},
		methods: {

			//一级分类
			clickCategoryType(code) {
				//console.log('type分类具体点击：', code);
				this.requestCategory.typeCode = code;
				this.fetchCategoryContent(
					this.requestCategory.typeCode,
					this.requestCategory.firstCode,
					this.requestCategory.secondCode,
				);

				//this.currentTab.firstIndex = 0;
				//this.currentTab.secondIndex = 0;

			},

			//2级分类
			clickCategoryFirst(code) {
				console.log('2级分类具体点击：', code);
				this.requestCategory.firstCode = code;
				// 处理分类点击事件
				this.fetchCategoryContent(
					this.requestCategory.typeCode,
					this.requestCategory.firstCode,
					this.requestCategory.secondCode,
				);

				this.currentTab.secondIndex = 0;
				//console.log('2级分类具体点击：curretnTab', this.currentTab);
			},

			//3级分类
			clickCategorySecond(code) {
				//console.log('3级分类具体点击：', code);
				this.requestCategory.secondCode = code;
				// 处理分类点击事件
				this.fetchCategoryContent(
					this.requestCategory.typeCode,
					this.requestCategory.firstCode,
					this.requestCategory.secondCode,
				);

				if (this.currentTab.typeCode) {
					this.currentTab.firstIndex = 0;
				}

			},

			fetchCategoryContent(currentCategoryType, currentCategoryFirstCode, currentCategorySecondCode) {

				request.post({
					url: '/api/category/categoryAndContent',
					data: {
						'typeCode': currentCategoryType,
						'categoryFirstCode': currentCategoryFirstCode,
						'categorySecondCode': currentCategorySecondCode
					}
				}).then(res => {
					//console.log('API返回数据：', res);
					
					if(res.code === 2000) {
						this.articleList = res.data.articleList || [];
						this.categoryType = res.data.category.categoryType || [];
						this.categoryFirst = res.data.category.categoryFirst || [];
						this.categorySecond = res.data.category.categorySecond || [];

					} else {
						uni.showToast({
							title: res.message || '获取数据失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					//console.error('获取分类内容失败:', err);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
				});
			},
		},
		onLoad() {
			this.fetchCategoryContent();
		},
	}
</script>

<style scoped>

.category-nav{
	background-color: #fff;
}

.content{
	background-color: #f8f9fe;
	min-height: 70vh;
	padding: 40rpx 20px;
}

.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #fff;
}

.loading-text {
	margin-top: 20rpx;
	color: #909399;
	font-size: 28rpx;
}

.no-data {
	text-align: center;
	padding: 40rpx;
	color: #909399;
	font-size: 28rpx;
}

.skeleton-container{
	margin-top: 40rpx;
	padding: 40rpx 40rpx;
}

</style>
